<template>
    <div class="forumContainer">
        <div class="myForumContent">
            <div class="back" @click="goBack"></div>
            <p class="title">我的帖子 {{ forums.length }}</p>
            <div class="other"></div>
        </div>
        <div class="forumContent">
            <ul class="forums">
                <li v-for="forum in forums" :key="forum.id">
                    <div class="forum">
                        <div class="forumImg"></div>
                        <div class="forumInfo">
                            <div class="tell">
                                <p class="tellTitle">{{ forum.title }}</p>
                                <p class="tellContent">{{ forum.tell }}</p>
                            </div>
                            <div class="userInfo">
                                <p class="name">{{ forum.user }}</p>
                                <p class="firstTime" v-if="ifShow(forum.id)">{{ collectionTime(forum.id) }}天前</p>
                                <p class="secondTime" v-if="!ifShow(forum.id)">{{ collectionMonth(forum.id) }}-{{ collectionDay(forum.id) }}</p>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name:'allForum',
        data(){
            return{
                forums:[
                    {id:0,title:'分享一下我改善多囊卵巢的经验',tell:'我不久前才查出有多囊卵巢，现在来分享',user:'hhhin',time:'03-05',cancel:false},
                    {id:1,title:'帖子',tell:'经验分享',user:'三分',time:'03-04',cancel:false},
                    {id:2,title:'大家去医院检查花了多少钱',tell:'过几天准备去医院检查，想问大家都花了',user:'kakakoo',time:'01-02',cancel:false},
                    {id:3,title:'大家去医院检查花了多少钱',tell:'过几天准备去医院检查，想问大家都花了',user:'kakakoo',time:'01-02',cancel:false}
                ],
            }
        },
        methods:{
            goBack(){
                this.$router.back()
            },
            ifShow(id){
                let myDate=new Date()
                let nowDay='0'+myDate.getDate()
                let nowMonth='0'+(myDate.getMonth()+1)
                for(let i=0;i<this.forums.length;i++){
                    if(id===this.forums[i].id){
                        let collectDay=(this.forums[i].time.split('-'))[1]
                        let collectMonth=(this.forums[i].time.split('-'))[0]
                        if(nowMonth-collectMonth>0) return false
                        else if(nowMonth-collectMonth<=0){
                            if(nowDay-collectDay<=7) return true
                            else return false
                        }
                    }
                }
            },
        },
        computed:{
            collectionTime(){
                let myDate=new Date()
                let nowDay='0'+myDate.getDate()
                return (id)=>{
                    for(let i=0;i<this.forums.length;i++){
                        if(id===this.forums[i].id){
                            let collectDay=(this.forums[i].time.split('-'))[1]
                            return (''+(nowDay-collectDay))
                        }
                    }
                }
            },
            collectionMonth(){
                return (id)=>{
                    for(let i=0;i<this.forums.length;i++){
                        if(id===this.forums[i].id){
                            let collectMonth=(this.forums[i].time.split('-'))[0]
                            return collectMonth;
                        }
                    }
                }
            },
            collectionDay(){
                return(id)=>{
                    for(let i=0;i<this.forums.length;i++){
                        if(id===this.forums[i].id){
                            let collectDay=(this.forums[i].time.split('-'))[1]
                            return collectDay
                        }
                    }
                }
            }
        }
    }
</script>

<style scoped>
    .forumContainer{
        width: 100vw;
        height: 100vh;
        overflow-x: hidden;
        overflow-y: scroll;
        scrollbar-width: none; 
    }
    .myForumContent{
        width: 6.86rem;
        height: 1.76rem;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        left:.32rem;
        z-index: 1;
        background-color: #F6F8FA;
    }
    .back{
        background-image: url(../assets/img/6-icon@2x/back.png);
        width: .32rem;
        height: 0.32rem;
        background-position: center;
        background-size: contain;
    }
    .title{
        font-family: 'PingFangSC-Mediuem';
        color:#333333;
        font-size: .36rem;
    }
    .other{
        width: .32rem;
    }
    .forumContent{
        margin-top: 1.76rem;
        width: 100%;
    }
    .forums{
        width: 6.86rem;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
    }
    .forum{
        margin-bottom: .2rem;
        display: flex;
        align-items: center;
    }
    .forumImg{
        background-color: #FFF;
        width: 1.6rem;
        height: 1.6rem;
        border-radius: .2rem;
    }
    .forumInfo{
        margin-left: .2rem;
        width: 4.6rem;
        height:1.6rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .tell{
        display: flex;
        flex-direction: column;
    }
    .tellTitle{
        font-family: 'PingFangSC-Mediuem';
        color: #333333;
        font-size: 16px;
    }
    .tellContent{
        font-family: 'PingFangSC-Regular';
        color:#999999;
        font-size: .24rem;
        margin-top: .06rem;
    }
    .userInfo{
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-family: 'PingFangSC-Regular';
        color:#999999;
        font-size: .26rem;
    }
</style>